import Base from "../base.js";
import StudentsApi from "../../api/students.js";

export default class extends Base {
    async getClasses() {
        this.classes = await StudentsApi.getClasses();
    }
    mounted(){
        this.getClasses()
    }
    update(updateStudent = {}) {
        for (let key in updateStudent) {
            key != "sex" ? $(`.update input[name='${key}']`).val(updateStudent[key]) : "";
        }
        console.log(updateStudent.classId);
        // $(`.update select`).val(updateStudent.classId._id);
        $(`.update input[name='sex']`).map(function () {
            $(this).val() == updateStudent.sex ? $(this).prop("checked", true) : "";
        });
        layui.form.on('submit(update)', function (data) {
            const obj = data.field;
            obj["_id"] = updateStudent._id;
            console.log(obj);
            layui.layer.closeAll();
            const state = StudentsApi.updateStu(obj);
            state.then(data => {
                if (data.ok) {
                    layui.layer.msg("修改成功！");
                } else {
                    layui.layer.msg("未能成功修改");
                }
            });
            StudentsApi.reload();
            return false
        });
    }
    addstu() {
        layui.form.on('submit(addstu)', function (data) {
            layui.layer.closeAll();
            StudentsApi.add(data.field);
            layui.layer.msg("添加成功！");
            StudentsApi.reload();
            return false
        });
    }
    //弹出框
    popup(str, filter, fn, obj = {}) {
        layui.layer.open({
            type: 1
            , area: '400px'
            , title: [str, 'font-size:18px;']
            , content: `<form class="layui-form ${filter}" style="padding:20px 50px"> 
            <div class="layui-form-item">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入学生姓名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <input type="text" name="age" required lay-verify="required|number" placeholder="请输入学生年龄" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <select name="classId" lay-verify="required" class="classId"></select> 
                    </div>
                    <div class="layui-form-item">
                        <input type="text" name="tel" required lay-verify="required|phone" placeholder="请输入学生联系方式" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <input type="text" name="email" required lay-verify="required|email" placeholder="请输入学生邮箱" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <input type="radio" name="sex" value="男" title="男" checked>
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
            <div class="layui-form-item">
                        <button class="layui-btn" lay-submit lay-filter="${filter}">确定</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div></form>`
            //添加学生
            , success: () => {
                $(".classId").html(`
                <option value="">请选择班级</option>
                ${this.classes.map(item => `<option value="${item.name}">${item.name}</option>`).join("")
                    }`).val(obj?.classId);
                fn(obj);
            }
            , shade: 0.2
        });
        layui.form.render();
    }
    handle() {
        //表头工具事件
        layui.table.on('toolbar(students)', obj => {
            switch (obj.event) {
                //查看所有学生
                case "view":
                    StudentsApi.reload(1);
                    break;
                //搜索
                case "select":
                    StudentsApi.select(layui.form.val("select"));
                    break;
                //添加学生
                case "add":
                    this.popup("添加学生", "addstu", this.addstu);
                    break;
                case "delete":
                    const checkStatus = layui.table.checkStatus(obj.config.id);//获取选中数据
                    console.log(checkStatus);
                    layui.layer.confirm(`真的要删除选中学生吗？`, function (index) {
                        layer.close(index);
                        checkStatus.data.map(item => {
                            StudentsApi.delete(item._id);
                        });
                        StudentsApi.reload();
                    });
                    break;
            }
        });
        //行工具事件
        layui.table.on("tool(students)", obj => {
            switch (obj.event) {
                case 'del': {
                    layui.layer.confirm(`真的要删除 ${obj.data.name} 吗？`, function (index) {
                        layer.close(index);
                        StudentsApi.delete(obj.data._id);
                        StudentsApi.reload();
                    });
                    break;
                }
                case "edit": {
                    this.popup("修改学生", "update", this.update, obj.data);
                    break;
                }
            }
        });
    }
    render() {
        this.$el.html(`
            <table id="stutable" lay-filter="students"></table>
        `);
        const toolbar = `<div class="layui-btn-container">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </div>`;
        const toolbarhead = `<div class="layui-btn-container">
                                <form lay-filter="select" class="layui-form layui-inline">
                                    <div class="layui-inline" style="width:90px">
                                        <select name="type" lay-verify="required">
                                            <option value="name">按姓名</option>
                                            <option value="classId">按班级</option>
                                            <option value="age">按年龄</option>
                                            <option value="sex">按性别</option>
                                        </select>
                                        </div>
                                    <div class="layui-inline">
                                        <input class="layui-input" name="selvalue" autocomplete="off" placeholder="请输入查询内容">
                                    </div>
                                </form>
                                <button class="layui-btn layui-btn-sm" lay-event="select">搜索学生</button>
                                <button class="layui-btn layui-btn-sm" lay-event="view">查看所有学生</button>
                                <button class="layui-btn layui-btn-sm" lay-event="add">添加学生</button>
                                <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除选中学生</button>
                            </div>`;
        StudentsApi.layuilist({ toolbar, toolbarhead });
    }
}
